/**
 *
 */
/*入口函数*/
$(function(){
    /*$('.carousel').carousel({
        interval: 5000
    });
*/
    banner();
    getTabsWidth();

    /*初始化工具提示*/
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });
});

/*轮播图*/
function banner(){
    /*发起异步请求*/
    var getData=function(callback){
        $.ajax({
            type:"get",
            url:"../demo/imgData.json",
            data:{},
            success:function(result){
                callback(result);
            }
        });
    }

    var isMobile=true;

    /*拿到数据之后，渲染*/
    /*得根据设备的宽度(移动端还是非移动端)：得获取设置的宽度*/

    var render=function(){
        /*1.获取当前设备的宽度*/
        var width=$(window).width();
        /*2.创建标记，标记当前是移动端还是非移动端，同时后期需要将这个值返回到客户端：做为渲染指定页面结构的判断依据*/
        //var isMobile=true;
        /*3.判断当前设备是否是移动端*/
        if(width >=768){
            isMobile=false;
        }
        else{
            isMobile=true;
        }
        var data=getData(function(result){
            /*4.调用模板引擎: 模板ID  参数*/
            var html=template("imgTemp",{"items":result,"isMobile":isMobile});
            /*渲染*/
            $(".carousel-inner").html(html);

            /*使用underscore来实现模板引擎的替换*/
            /*1.模板字符串(自己先读取好) */
            var indHTML=document.getElementById("indicatorTemp").innerHTML;
            /*生成模板对象*/
            var indicator= _.template(indHTML);
            /*传入数据，生成可渲染的html代码*/
            var indicatorHTML=indicator({"items":result});
            /*渲染*/
            $(".carousel-indicators").html(indicatorHTML);
        });
    }
    render();

    /*添加事件，并且立刻触发一次*/
    /*trigger:触发器*/
    /*$(window).on("resize",function(){
     render();
     }).trigger("resize");*/
    /*当屏幕宽度发生变换的时候，需要重新渲染*/
    $(window).on("resize",function(){
        /*判断：如果当前是从移动端切换到了非移动端，或者从非移动端切换到移动端，才需要重新从服务器获取数据*/
        var width=$(window).width();
        if((isMobile==true && width >=768)  || (isMobile==false && width <768)){
            /*虽然数据一样，但是对于数据的处理(渲染方式)不一样，移动端和非移动端需要展示的内容不一样*/
            render();
        }
    });

    /*实现滑动操作：bootstrap中没有封装好滑动事件，所以我们自己进行添加*/
    var startX=0;
    var moveX=0;
    var distanceX=0;
    /*添加三个touch事件*/
    var carouselinner=document.querySelector(".carousel-inner");

    carouselinner.addEventListener("touchstart",function(e){
        startX= e.touches[0].clientX;
    });

    carouselinner.addEventListener("touchmove",function(e){
        moveX= e.touches[0].clientX;
        distanceX=moveX-startX;
    });
    /*触摸结束*/
    carouselinner.addEventListener("touchend",function(e){
        /*判断滑动的距离*/
        if(Math.abs(distanceX) >100){
            if(distanceX>0){/*上一张*/
                $(".carousel").carousel('prev');
            }
            else if(distanceX <0){/*下一张*/
                $(".carousel").carousel('next');
            }
        }
    });
}

/*获取标签页宽度，并实现滑动*/
function getTabsWidth(){
    /*动态的获取标签页的宽度*/
    var  nav_ptabs=$(".nav-ptabs");
    var lis=nav_ptabs.find("li");
    /*总宽度*/
    var totalWidth=0;
    /*循环遍历，累加*/
    for(var i=0;i<lis.length;i++){
        var li=lis[i];
        /*width()：只是获取内容宽度，不包含padding/margin/border
        * innerWidth():获取内容+padding,不包含margin/border
        * outerWidth():获取内容+padding+border,不包含margin
        * outerWidth(true):获取内容+padding+border+margin*/
        totalWidth=totalWidth+$(li).innerWidth();
    }
    /*设置宽度*/
    nav_ptabs.width(totalWidth);

    /*实现滑动*/
    itcast.iScroll({
        swipeDom:document.querySelector(".nav-ptabs-parent"),
        swipeType:"x",
        swipeDistance:100
    });
}